<script setup lang="ts">
import { ref, reactive,onMounted } from 'vue'
import { useAppStore } from '@/store'
import { SettingsOutline,EyeOutline,EyeOffOutline,MenuOutline,FilterOutline,Close,CheckmarkSharp,ChevronDownOutline,ApertureOutline,Moon,Sunny,AppsSharp,ChatboxEllipsesOutline,CloudDownloadOutline,TrashBinOutline,WalletOutline,TrailSignOutline,NavigateOutline } from '@vicons/ionicons5'
import { useNotification,useLoadingBar  } from 'naive-ui'
import { on_opendir,reset_theme } from '@/utils/comm'
import { IPC } from 'root/common/constants'
 
const loadingBar = useLoadingBar()
const notification = useNotification()
loadingBar.start()

const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}

const setWindows = async (e:String) => {
  try {
    await window.ipcRenderer.invoke(IPC.ELECTRON_WINDOWS, e)
  } catch (error: any) {
    console.log('setWindows', error.message)
  }
}

const store = useAppStore()
const value1 = ref(true)
const value3 = ref(false)
const value2 = ref(false)
const value4 = ref(false)
const value5 = ref(false)

const value = ref(0)
const data =  reactive({
  show_1: false,
  thems:{} as any
});
data.thems = store.thems
const options = [
  {
    value: 0,
    label: '默认模式',
  },
  {
    value: 1,
    label: '全屏模式',
  },
  {
    value: 2,
    label: '小窗模式',
  }
]

const save_thems = async () => {
  store.setthems(data.thems)
}

const change_color = async (e:any) => {
  data.thems.primary = e 
  save_thems()
}

const show_1 = () => {
  data.show_1 = data.show_1?false:true
}

const menu_left = () => {
  save_thems()
}

const menu_dark = () => {
  save_thems()
}

 
const message_open = async () => {
  if(value1.value){
    msg("已打开消息通知")
  }else{
    msg("已关闭消息通知")
  }
}

const clear_open = async () => {
  await window.ipcRenderer.invoke(IPC.ELECTRON_WINDOWS, 'clear')
  if(value3.value){
    msg("已清理缓存,下次打开软件后生效")
  }else{
    msg("已关闭清理缓存")
  }
}
const handleUpdateValue = (value: number)  =>{
  if(value==0){setWindows('normal')}
  if(value==1){setWindows('max')}
  if(value==2){setWindows('unmax')}
}

onMounted(() => {
  setTimeout(() => {
    loadingBar.finish()
  }, 600)
})

</script>

<template>
  
  <div class="system-page page_up"  :style="data.thems.menu_left?'height:calc(100vh - 100px);':''">
    <n-scrollbar style="max-height: calc(100vh - 10px);padding: 10px;" trigger="none">
      <!--面包屑-->
    <div class="page_head">
      <div class="title" style="margin-bottom: 10px;">
        <n-tag round :bordered="false" size="large">系统设置
          <template #avatar><n-avatar :style="{backgroundColor:store.thems?.primary}"><n-icon><SettingsOutline /></n-icon></n-avatar></template>
        </n-tag>
      </div>
    </div>
 
    <div class="set_con">
      <n-card class="card_new" :bordered="false" header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header"  @click="show_1">
            <div class="icon"><n-icon size="25"><ApertureOutline /> </n-icon> </div>
            <div class="title">主题设置<br><span>系统主题配色自定义</span></div>
            <div class="btn">
                <n-icon size="20" :class="[data.show_1?'refreshIcon180':'refreshIcon0']" ><ChevronDownOutline /> </n-icon> 
            </div>
          </div>
        </template>
        <n-collapse-transition :show="data.show_1">
            <div class="card_body">
              <n-form>
                <n-form-item label="系统配色">
                  <n-color-picker v-model:value="data.thems.primary" :show-alpha="false" :on-complete="change_color"/>
                </n-form-item>
                <n-form-item label="窗体大小">
                  <n-select v-model:value="value" :options="options"  @update:value="handleUpdateValue"/>
                </n-form-item>
              </n-form>
            </div>
        </n-collapse-transition>
      </n-card>

      <n-card class="card_new"  :bordered="false"  header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header">
            <div class="icon"><n-icon size="25"><Sunny /></n-icon></div>
            <div class="title">主题模式<br><span>浅色/深色模式</span></div>
            <div class="btn">
              <n-switch :round="false" v-model:value="data.thems.dark" size="large" @click="menu_dark">
                <template #checked-icon><n-icon :component="Moon" /></template>
                <template #unchecked-icon><n-icon :component="Sunny" /></template>
                <template #checked>深色</template>
                <template #unchecked>浅色</template>
              </n-switch>
            </div>
          </div>
        </template>
      </n-card>

      <n-card class="card_new"  :bordered="false"  header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header">
            <div class="icon"><n-icon size="25"><AppsSharp /></n-icon></div>
            <div class="title">左侧菜单<br><span>菜单从底部移动到左侧显示</span></div>
            <div class="btn"> 
              <n-switch :round="false" v-model:value="data.thems.menu_left" size="large" @click="menu_left">
                <template #checked-icon><n-icon :component="FilterOutline" /></template>
                <template #unchecked-icon><n-icon :component="MenuOutline" /></template>
                <template #checked>底部</template>
                <template #unchecked>左侧</template>
              </n-switch>
            </div>
          </div>
        </template>
      </n-card>

      <n-card class="card_new" :bordered="false"   header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header">
            <div class="icon"><n-icon size="25"><ChatboxEllipsesOutline /></n-icon></div>
            <div class="title">消息通知<br><span>是否接收系统推送消息</span></div>
            <div class="btn">
              <n-switch :round="false" v-model:value="value1" size="large" @click="message_open">
                <template #checked-icon><n-icon :component="CheckmarkSharp" /></template>
                <template #unchecked-icon><n-icon :component="Close" /></template>
                <template #checked>接收</template>
                <template #unchecked>关闭</template>
              </n-switch>
            </div>
          </div>
        </template>
      </n-card>

      <n-card class="card_new" :bordered="false"   header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header">
            <div class="icon"><n-icon size="25"><CloudDownloadOutline /></n-icon></div>
            <div class="title">下载文件夹<br><span>E:\cosck_win2\download</span></div>
            <div class="btn">
              <n-button @click="on_opendir" strong secondary size="small">打开路径</n-button>
            </div>
          </div>
        </template>
      </n-card>

      <n-card class="card_new" :bordered="false"   header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header">
            <div class="icon"><n-icon size="25"><TrashBinOutline /></n-icon></div>
            <div class="title">清理缓存<br><span>手动清除缓存文件</span></div>
            <div class="btn">
              <n-switch :round="false" v-model:value="value3" size="large" @click="clear_open">
                <template #checked-icon><n-icon :component="CheckmarkSharp" /></template>
                <template #unchecked-icon><n-icon :component="Close" /></template>
                <template #checked>开启</template>
                <template #unchecked>关闭</template>
              </n-switch>
            </div>
          </div>
        </template>
      </n-card>

      <n-card class="card_new" :bordered="false"   header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header">
            <div class="icon"><n-icon size="25"><WalletOutline /></n-icon></div>
            <div class="title">关闭时隐藏<br><span>关闭软件到托盘而非结束进程</span></div>
            <div class="btn">
              <n-switch :round="false" v-model:value="value4" size="large">
                <template #checked-icon><n-icon :component="EyeOutline" /></template>
                <template #unchecked-icon><n-icon :component="EyeOffOutline" /></template>
                <template #checked>显示</template>
                <template #unchecked>隐藏</template>
              </n-switch>
            </div>
          </div>
        </template>
      </n-card>

      <n-card class="card_new" :bordered="false"   header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header">
            <div class="icon"><n-icon size="25"><TrailSignOutline /></n-icon></div>
            <div class="title">菜单收起<br><span>默认收起栏目分类菜单</span></div>
            <div class="btn">
              <n-switch :round="false" v-model:value="value5" size="large">
                <template #checked-icon><n-icon :component="CheckmarkSharp" /></template>
                <template #unchecked-icon><n-icon :component="Close" /></template>
                <template #checked>展开</template>
                <template #unchecked>收起</template>
              </n-switch>
            </div>
          </div>
        </template>
      </n-card>

      <n-card class="card_new" style="margin-bottom: 0;" :bordered="false"   header-style="padding:0" content-style="padding:0">
        <template #header>
          <div class="card_header">
            <div class="icon"><n-icon size="25"><NavigateOutline /></n-icon></div>
            <div class="title">默认设置<br><span>初始化系统设置</span></div>
            <div class="btn">
              <n-switch :round="false" v-model:value="value2" @click="reset_theme" size="large">
                <template #checked-icon><n-icon :component="CheckmarkSharp" /></template>
                <template #unchecked-icon><n-icon :component="Close" /></template>
                <template #checked>完成</template>
                <template #unchecked>重置</template>
              </n-switch>
            </div>
          </div>
        </template>
      </n-card>
 
    
    </div>
  

  </n-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.system-page {
  padding: 0px;
  height: calc(100vh - 52px);
}
.card_new{
  margin-bottom: 10px;
  background-color: rgba(255,255,255,0.03);
}
.card_header{
      display: flex;
      align-items: center;
      font-size: 14px ;
      padding: 10px;
      height: 60px;
      span{
        font-size: 11px;
      }
      .icon{
        margin:0 10px;
      }
      .title{
        line-height: 20px;
        margin:0 10px;
      }
      .btn{
        margin-left: auto;margin-right: 0;
      }
  }

  

.card_body{
  padding: 10px 10px !important;
  padding-bottom: 0;
  border-top: 1px solid #e3e3e34f;
}
.light-mode {
  .card_new{
    background-color: rgba(0,0,0,0.05);
  }
  .card_body{
    border-top: 1px solid #e3e3e3;
  }
}

</style>
